<template>
  <div style="padding-bottom: 42px;">
    <div class="search-block" v-if="showsearch">
      <searchtab @searchopen="opensearch" @checkstab="goindex" @linksearch="searchlink" :tablist="tablistprop"></searchtab>
    </div>
    <div class="search-block-new" v-if="showsearchlist">
      <searchlist @cansearch="searchcan" :searchprop="searchtext"></searchlist>
    </div>
    <div class="detail-top-tab pc-bk" >
      <navblock></navblock>
    </div>
    <div class="tab-title tablist-title" style="display: none;">
      {{second_level_cname}}
    </div>
    <div class="second-info pc-bk" style="display: none;">
      <div class="second-tablist">
        <div class="tablist-ele" v-for="(secondtab,index) in secondlist"  @click="moreBtn" :data-id="secondtab.id" :data-itid="secondtab.item_id" :data-type="secondtab.content_type" :data-sbid="secondtab.subject_id">
          <span v-bind:class="{'active':secondtab.is_selected === 1}">{{secondtab.name}}</span> <i v-if="index < secondlist.length - 1">·</i>
        </div>
      </div>
      <div class="second-info-text" v-if="note!=='' ">
        {{note}}
      </div>
    </div>
    <div class="top-content-block">
      <div class="tab-title tablist-title mobile-top">
        {{second_level_cname}}
      </div>
      <div class="left-nav pc-bk" ref="leftnav" v-bind:class="{'scroll':scrolldetail === 1, 'fbottom':fixedbottom === 1}" ><!--左侧导航-->
        <div class="detail-search">
          <input type="text"  v-model="searchtext" placeholder="全站搜索 Search" @keyup.enter="searchBtn1">
          <img src="../../img/mobile/search_new.png"  @click="searchBtn1">
        </div>
        <div class="side-header hy detail">
          <span class="sidle-text">{{first_level_cname}}
          <!-- <i>BRAINPOWER</i> -->
          </span>
          <span class="sidle-icon"><img src="../../img/mobile/side-header-hy.jpg"></span>
        </div>
        <div class="meeting-list  detail-sidle">
          <ul>
            <li v-for="(meetlist, index) in tablist" v-if="meetlist.item_id !== 0" v-bind:class="{'open': meetlist.is_selected === 1}" :data-id="tablist.length">
              <div class="detail-sidle-main" @click="moreBtn" :data-id="meetlist.id" :data-itid="meetlist.item_id" :data-type="meetlist.content_type">
                <span class="focus-icon">
                </span>
                <span class="focus-title-link">
                  {{meetlist.name}}
                </span>
              </div>
              <div class="open-sidle" v-if="meetlist.children.length > 0">
                <div class="open-sidle-list" v-if="listchild.item_id !== 0" v-bind:class="{'active' : listchild.is_selected === 1}" @click="tomoreList" :data-id="listchild.id" :data-itid="listchild.item_id" :data-tcid="listchild.third_level_cid" :data-cid="listchild.parent_cid" :data-type="listchild.content_type" v-for="(listchild, childindex) in meetlist.children">
                  {{listchild.name}}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="datalist.total>0">
        <div class="listpage-content" v-if="contenttype === 'news'" v-bind:class="{'scroll':scrolldetail === 1}" >
          <div class="side-header hy-light pc-bk">
            <span class="sidle-text"><span v-if="sbjid !== 0" @click="toTopic">{{first_level_cname}} > </span><span>{{second_level_cname}}</span></span>
          </div>
          <div class="content-list-block">
            <div class="content-list-body list">
              <div class="agenda-list pc-bk"  @click="linkDetail" :data-id="contlist.id" v-for="contlist in datalist.list">
                <div class="agenda-img" :style="{backgroundImage:'url(' + contlist.cover_path + ')'}"></div>
                <div class="agenda-title hy">
                  {{contlist.title}}
                </div>
                <div class="agenda-article-info"
                     style="
                        /*! autoprefixer: off */
                        -webkit-box-orient: vertical;
                        /* autoprefixer: on */">
                  {{contlist.note}}
                </div>
                <div class="article-share-icon">
                  <img src="../../img/mobile/at-share-icon.png">
                </div>
              </div>
              <div class="see-more-btn mobile-top" v-if="showmore">
                <span @click="moreList">查看更多</span>
              </div>
              <div class="list-page pc-bk">
                <el-pagination
                    @current-change="handleCurrentChange"
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="limtsize"
                    :current-page="page"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
        <div class="listpage-content" v-if="contenttype === 'download'" v-bind:class="{'scroll':scrolldetail === 1}" >
          <div class="downlist-content" v-if="downlistshow">
            <div class="top-line-title">
              <div class="side-header light-user pc-bk">
                <span class="sidle-text">{{thistitle}}</span>
                <span class="sidle-icon"><img src="../../img/mobile/side-header-light.jpg"></span>
              </div>
              <div class="detail-search">
                <input type="text"  v-model="searchtext" placeholder="全站搜索 Search" @keyup.enter="searchBtn1">
                <img src="../../img/mobile/search_new.png"  @click="searchBtn1">
              </div>
            </div>
            <div class="content-list-block">
              <div class="content-list-body list down-list-block">
                <div class="down-article-list" v-for="downlists in downlist">
                  <div class="article-list-top">
                    <div class="article-list-title">
                      <!-- <span class="left-tt-note">
                        标题
                      </span> -->
                      <span class="list-title-text">
                        {{downlists.title}}
                      </span>
                    </div>
                    <div class="down-btn" @click="DownFile" :data-url="downlists.attach" :data-login="downlists.need_auth">
                      下载
                    </div>
                  </div>
                  <div class="article-list-content">
                    {{downlists.note}}
                  </div>
                </div>
                <div class="list-page pc-bk">
                  <el-pagination
                      @current-change="handleCurrentChangedw"
                      layout="prev, pager, next"
                      :total="downtotal"
                      :page-size="limtsizedw"
                      :current-page="page"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
          <div class="downloadnote" v-else>
            <div class="note-title">
              国际金融论坛（IFF）下载中心用户协议
            </div>
            <div class="note-content">
              国际金融论坛（IFF）下载中心所有文档的最终解释权归国际金融论坛（IFF）所有，相关文档以最新发布为准，如有变动与更新恕不另行通知，请及时查阅本列表。 <br><br>
              国际金融论坛（IFF）下载中心文档的知识产权均归属于国际金融论坛（IFF）所有，下载者仅有阅读权利。禁止下载者对文档进行任何恶意的篡改、翻印，以及未经授权的印刷与传播。对此类行为，国际金融论坛（IFF）将保留诉讼等法律权利。
            </div>
            <div class="note-button">
              <span class="downloadbtn sure" @click="sureDownload">确认并开始下载</span>
              <span class="downloadbtn" @click="cancelDownload">取消</span>
            </div>
          </div>
        </div>
      </div>
      <div class="no-content" style="height: 600px;" v-bind:class="{'scroll':scrolldetail === 1}" v-else>
        <div class="nosearch ok">
          <img src="../../img/mobile/emptycontent.jpeg" alt="">
        </div>
        <!-- 空空如也！ -->
      </div>
    </div>
    <footernav></footernav>
  </div>
</template>
<script>
  import api from '../../utils/api'
  import apiConfig from '../../utils/apiconfig.js'
  import helper from '../../utils/helper'
  import { Indicator, Spinner, MessageBox } from 'mint-ui'
  import navblock from './components/nav'
  import searchtab from './components/searchtab'
  import searchlist from './components/search'
  import footernav from './components/footernav'
  export default {
    data () {
      return {
        limtsizedw: 10,
        downlistshow: false,
        downlist: [],
        datalist: {
          list: []
        },
        contenttype: 'news',
        scrolldetail: 0,
        fixedbottom: 0,
        searchtext: '',
        page: 1,
        total: '',
        limtsize: 9,
        tablist: [],
        showsearchlist: false,
        pages: 1,
        loading: false,
        second_level_cname: '',
        showmore: true,
        imgUrl: '',
        secondlist: [],
        first_level_cname: '',
        checktab: '',
        navtitle: '',
        sbjid: 0,
        loginuser: false,
        back: false,
        downtotal: ''
      }
    },
    components: {
      Spinner,
      navblock,
      searchtab,
      searchlist,
      footernav
    },
    beforeCreate(){
      var metaEl = document.getElementsByTagName("meta")
      metaEl[3]['content'] = "";
    },
    created () {
      var mydata = sessionStorage.checktab
      this.checktab = mydata
      this.tabid = this.$route.query.id
      if (localStorage.token && localStorage.token !== '') {
        this.logintoken = localStorage.token
        this.loginuser = true
      } else {
        this.logintoken = 'STABLE'
        this.loginuser = false
      }
      if (this.$route.query.sbjid) {
        this.sbjid = parseInt(this.$route.query.sbjid)
      }
      console.log(this.sbjid)
      var page = parseInt(this.$route.query.page)
      if (page) {
        this.page = page
      }
      this.getDatalist(this.tabid, this.page)
      this.getdownlist(this.page)
      var imgUrl = require('../../img/mobile/blank.jpg')
      this.imgUrl = imgUrl
    },
    mounted () {
      window.addEventListener('scroll', this.handleScroll)
    },
    watch: {
     '$route' (to, from) {
        console.log(this.getStatus(this.$route.query.id))
        if (this.back === true) {
          this.getDatalist(this.getStatus(this.$route.query.id), this.page)
          this.back = false
        }
      }
    },
    methods: {
      getStatus (urlStr) {
        var urlStrArr = urlStr.split('/')
        return urlStrArr[urlStrArr.length - 1]
      },
      sureDownload () {
        this.downlistshow = true
        localStorage.setItem('downlistshow', true)
        var oDate1 = new Date().valueOf()
        localStorage.setItem('date1', oDate1)
      },
      cancelDownload () {
        this.$router.back(-1)
        this.back = true
      },
      DownFile (e) {
        var that = this
        var downurl = e.currentTarget.dataset.url
        var needau = e.currentTarget.dataset.login
        if (!that.loginuser && needau === '1') {
          MessageBox('提示', '请登录后再下载！')
        } else {
          window.open(downurl)
        }
      },
      getdownlist (page) {
        var that = this
        this.page = page
        var param = {
          token: this.logintoken,
          page: page
        }
        console.log(param)
        Indicator.open('加载中...')
        this.params = param
        api.GET(helper.getClientApiUrl(apiConfig.web.downloadlist), this.params, res => {
          that.tablist = res.nav
          that.thistitle = '下载中心'
          that.first_level_cname = res.nav_title
          that.downtotal = res.total
          that.downlist = res.list
          console.log(res)
          Indicator.close()
        }, res => {
          console.log(res)
          Indicator.close()
        })
      },
      handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop >= 100) {
          this.scrolldetail = 1
        } else {
          this.scrolldetail = 0
        }
      },
      toTopic () {
        this.$router.push('/home/conferencetopics?id=' + this.sbjid)
      },
      handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop >= 100) {
          this.scrolldetail = 1
        } else {
          this.scrolldetail = 0
        }
        console.log(scrollTop)
        var leftnav = this.$refs.leftnav.clientHeight
        var scrollbottom = document.documentElement.scrollHeight - scrollTop - leftnav
        console.log(scrollbottom)
        if (scrollbottom <= 270) {
          this.fixedbottom = 1
        } else {
          this.fixedbottom = 0
        }
      },
      searchBtn1 () {
        this.showsearchlist = true
      },
      opensearch (val) {
        console.log('test:' + val)
        this.showsearch = val
      },
      searchlink (val) {
        console.log('testsss:' + val)
        this.showsearchlist = val
      },
      searchcan (val) {
        this.showsearchlist = val
      },
      cpryrightBtn () {
        this.$router.push('/home/copyright')
      },
      contactBtn () {
        this.$router.push('/home/contactus')
      },
      linkDetail (e) {
        console.log(e.currentTarget.dataset.id)
        // let routeData = this.$router.resolve({ path: '/home/detail', query: { id: e.currentTarget.dataset.id } })
        // window.open(routeData.href, '_blank')
        this.$router.push('/home/detail?id=' + e.currentTarget.dataset.id)
      },
      handleCurrentChange (val) {
        this.getDatalist(this.tabid, val)
        this.$router.push('/home/list?id=' + this.tabid + '&page=' + val)
      },
      handleCurrentChangedw (val) {
        this.getDatalist(this.tabid, 1)
        this.getdownlist(val)
      },
      getDatalist (tab, page) {
        var that = this
        this.page = page
        var param = {
          sid: tab,
          page: page,
          subject_id: this.sbjid
        }
        Indicator.open('加载中...')
        this.params = param
        console.log(param)
        api.GET(helper.getClientApiUrl(apiConfig.web.list), this.params, res => {
          console.log('ww')
          Indicator.close()
          if (res.list.length > 0) {
            switch (this.tabid) {
              case 'TOP1': this.second_level_cname = '精选'
                this.first_level_cname = '首页'
                break
              case 'TOP2': this.second_level_cname = '热点'
                this.first_level_cname = '首页'
                break
              default: this.second_level_cname = res.list[0].second_level_cname
                this.first_level_cname = res.nav_title
                document.title = res.nav_title + '-国际金融论坛'
                break
            }
          } else if (res.nav_title) {
            this.first_level_cname = res.nav_title
            this.second_level_cname = ''
            document.title = res.nav_title + '-国际金融论坛'
          }
          if (res.list.length < 10 && res.list.length > 0) {
            this.second_level_cname = res.list[0].second_level_cname
            this.showmore = false
          }
          that.datalist.list = res.list
          var total = res.total
          that.total = total
          this.secondlist = res.nav
          this.note = res.note
          if (total !== 0) {
            that.first_level_cid = that.datalist.list[0].first_level_cid
            console.log('1')
          } else {
            console.log('2')
          }
          that.datalist.total = res.total
          that.tablist = res.nav
          that.tablist.forEach((item, index) => {
            if (item.content_type === 'news_detail' && item.is_selected === 1) {
              this.$router.push('/home/detail?id=' + item.item_id)
            } else if (item.content_type === 'DOWNLOAD' && item.is_selected === 1) {
              that.contenttype = 'download'
              var date2 = new Date().valueOf()
              var showdownlist = localStorage.downlistshow
              if (showdownlist) {
                var date1 = localStorage.date1
                var cookieday = date2 - date1
                cookieday = cookieday/1000/60/60/24
                console.log(cookieday)
                if (cookieday > 30) {
                  this.downlistshow = false
                  var oDate1 = new Date().valueOf()
                  localStorage.setItem('date1', oDate1)
                } else {
                  this.downlistshow = true
                }
              }
              console.log(that.downlist)
            } else {
              that.contenttype = 'news'
            }
          })
          that.loading = false
        }, res => {
          console.log(res)
          Indicator.close()
          this.loading = false
        })
      },
      backClick () {
        this.$router.go(-1)
      },
      moreList () {
        var thispage = this.page + 1
        this.page = thispage
        this.loading = true
        this.getDatalist(this.tabid, thispage)
      },
      moreBtn (e) {
        console.log(e.currentTarget.dataset.type)
        let conttype = e.currentTarget.dataset.type
        if (conttype === 'AUTHOR') {
          this.$router.push('/home/authorlist?id=' + e.currentTarget.dataset.id + '&sbjid=' + this.sbjid)
        } else if (conttype === 'news_detail' || conttype === 'source_detail') {
          this.$router.push('/home/detail?id=' + e.currentTarget.dataset.id + '&sbjid=' + this.sbjid)
        } else {
          this.getDatalist(e.currentTarget.dataset.id, 1)
          this.$router.push('/home/list?id=' + e.currentTarget.dataset.id + '&sbjid=' + this.sbjid)
          this.tabid = e.currentTarget.dataset.id
        }
        // this.$router.push('/home/list?id=' + e.currentTarget.dataset.id)
        // window.location.reload()
      },
      tomoreList (e) {
        let conttype = e.currentTarget.dataset.type
        let contid = e.currentTarget.dataset.id
        let contcid = e.currentTarget.dataset.cid
        if (conttype === 'source') {
          this.$router.push('/home/ifflist?id=' + contid + '&cid=' + contcid + '&sbjid=' + this.sbjid)
        } else if (conttype === 'news_detail' || conttype === 'source_detail') {
          this.$router.push('/home/detail?id=' + e.currentTarget.dataset.itid + '&tcid=' + e.currentTarget.dataset.tcid + '&sbjid=' + this.sbjid)
        } else if (conttype === 'news') {
          this.getDatalist(contid, 1)
          this.$router.push('/home/list?id=' + contid + '&sbjid=' + this.sbjid)
          this.tabid = contid
        }
      }
    }
  }
</script>
<style>

  .tab-title.tablist-title{
    font-weight: bold;
    border-bottom:1px solid #d9d9d9;
  }
  .learn-all{
    color: #4e6e6d;
    display: inline-block;
    float: right;
    margin-top: 7px;
    line-height: 23px;
  }
  .learn-all img{
    width: 7px;
    vertical-align: middle;
    margin-left: 5px;
  }
  .top-big-img{
    margin: 10px 0;
  }
  .top-big-img img{
    width:100%;
  }
  .top-content-intro{
    font-size: 16px;
    color: #2b2b2b;
    line-height: 1.6;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
  }
  .content-list{
    padding: 15px 0;
  }
  .footer-content{
    background: #222126;
    color: #ffffff;
    margin-top: 30px;
  }
  .footer-tab li.noline{
  border-right:none;
  }
  .see-more-btn{
    text-align: center;
    margin-bottom: 20px;
  }
  .see-more-btn span{
    height: 30px;
    line-height: 30px;
    display: inline-block;
    padding: 0 25px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    color: #9b9b9b;
    border:1px solid #9b9b9b;
    margin: 20px 0;
  }
  .loading-spinner{
    text-align: center;
  }
  .mint-spinner-fading-circle{
    margin: 10px auto;
  }
  .second-tablist{
    margin-bottom: 20px;
    font-size: 18px;
    color: #4e6e6d;
    font-weight: bold;
  }
  .second-info-text{
    font-size: 17px;
    line-height: 1.6;
    color: #353535;
    padding-bottom: 20px;
    border-bottom: 1px solid #d9d9d9;
  }
</style>
